/*
 * @LastEditors: haichang
 * @Description: 将vue3-elementui-admin由CLI改造为vite
 * @Date: 2023-12-23 06:35:02
 * @LastEditTime: 2023-12-28 20:37:02
 * @Author: haichang
 */
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入路由自动配置多级路由
import Pages from 'vite-plugin-pages'
//路由需要布局页面
// import Layouts from 'vite-plugin-vue-layouts'

// API自动引入插件
import AutoImport from 'unplugin-auto-import/vite'
// 组件自动引入插件
import Components from 'unplugin-vue-components/vite'
// ElementPlusResolver 组件和指令自动引入解析器
import { 
  ElementPlusResolver,
  VueUseComponentsResolver,
  VueUseDirectiveResolver
} from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'  //icon相关
import IconsResolver from 'unplugin-icons/resolver';  //icon相关 

//配置postcss
const postcssPresetEnv = require("postcss-preset-env") 

const PROJECT_ROOT = '../..'  //根据个人实际需要
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const viteEnv = loadEnv(mode, './')

  return {
    base: viteEnv.VITE_BASE,
    server: {
      host: '0.0.0.0',
      port: '8080',
      open: false,
      // 端口占用直接退出
      strictPort: true
      // 本地服务 CORS 是否开启
      // cors: true,
      // proxy: {
      //   [viteEnv.VITE_BASE_URL]: {
      //     target: viteEnv.VITE_BASE_SERVER_URL,
      //     // 允许跨域
      //     changeOrigin: true,
      //     rewrite: path => path.replace(viteEnv.VITE_BASE_URL, '/')
      //   }
      // }
    },
    build: {
      outDir: 'dist',
      assetsDir: 'static/assets',
      // sourcemap: true,
      // 规定触发警告的 chunk 大小，消除打包大小超过500kb警告
      chunkSizeWarningLimit: 2000,
      // 静态资源打包到dist下的不同目录
      rollupOptions: {
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
        }
      }
    },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        "@u": fileURLToPath(new URL('./src/utils', import.meta.url)),
        "@a": fileURLToPath(new URL('./src/api', import.meta.url)),
        "@c": fileURLToPath(new URL('./src/components', import.meta.url))
      }
    },
    plugins: [
      vue(),
      AutoImport({
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/,
          /\.vue\?vue/, // .vue
          /\.md$/ // .md
        ],
        //自动导入'vue', 'pinia', 'vue-router', '@vueuse/core'等
        imports: ['vue', 'pinia', 'vue-router', '@vueuse/core'],
        // 生成相应的自动导入json文件。
        // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
        eslintrc: {
          enabled: true,
          filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
          globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
        },
        //自动导入Element Plus相关函数，如：ElMessage,ElMessageBox...(带样式)
        resolvers: [
          ElementPlusResolver(),
          //自动导入图标组件
          IconsResolver({
            prefix: 'Icon'
          })
        ]
      }),
      Components({
        // imports 指定组件所在位置，默认为 src/components
        dirs: ['src/components/', 'src/views/'],
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
        resolvers: [
          //自动导入Element Plus组件
          ElementPlusResolver(),
          //自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep']  //重点
          }),
          VueUseComponentsResolver(),
          VueUseDirectiveResolver(),
        ],
        //解决运行时出现[unplugin-vue-components] component "Index"(xxx)has naming conflicts with other components, ignored.
        directoryAsNamespace: true, 
      }),
      Icons({
        autoInstall: true
      }),
      Pages({
        dirs: 'src/pages',  // 需要生成路由的文件目录
        exclude: ['**/components/*.vue']  // 排除在外的目录，即所有 components 目录下的 .vue 文件都不会生成路由
      }),
      //路由自动布局设置
      // Layouts({
      //   layoutsDirs: 'src/layout',  // 布局文件存放目录
      //   defaultLayout: 'index'  // 默认布局，对应 src/layout/index.vue
      // })
    ],

    //全局引入
    css: {
      // //配置postcss
      // postcss:{
      //   plugins: [
      //     postcssPresetEnv({
      //       importFrom: path.resolve(fileURLToPath(new URL('', import.meta.url)), './varible.css') // 就是让postcss知道有一些全局变量需要记录下来 ，包含postcss-custom-properties用于处理css变量
      //     })
      //   ], // 可以直接写postcssPresetEnv 不要任何配置
    
      preprocessorOptions: {
        scss: {
          /**css预设器配置项
           * '@import "@/assets/scss/globalVariable1.scss";
           * @import"@/assets/scss/globalVariable2.scss";'
          **/
          additionalData: '@import "@/styles/globalVar.scss";@import "@/styles/globalMixin.scss"; @import "@/styles/main.scss";'
        }
      }
    },
    // server: {
    //   port: 8080, //自动端口
    //   hmr:{
    //     gost: '127.0.0.1',
    //   },
    //   //设置http代理
    //   proxy:{
    //     'api':{
    //       target:'自己的https地址',
    //       changeOrigin: true,
    //       rewrite: (path) => path.replace(/^\/api/, '')
    //     }
    //   }
    // }
  }
})

